<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable-next-line vue/valid-template-root -->
<script setup>
import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
defineProps(['item'])
const app = getCurrentInstance()
const { dayjs } = app.appContext.app.config.globalProperties

const router = useRouter()
const toArticleDetail = (article_id) => {
  const routeUrl = router.resolve({
    path: `/article/${article_id || null}`
  })
  window.open(routeUrl.href, '_blank')
}
</script>

<template>
  <div class="notes-item feat-5748-n3lf0e7ysp7">
    <div class="tile d-block">
      <div class="tile-header flex-center justify-between">
        <div class="article-header text-gray text-tiny d-flex align-center">
          <h3 class="text-dark h5 mt-2 mb-0">
            <a style="cursor: pointer" @click="toArticleDetail(item.id)">{{ item.articleTitle }}</a>
          </h3>
        </div>
        <!---->
      </div>
      <div class="tile-content p-0">
        <div class="flex-wrap">
          <img v-if="item.headImg" :src="item.headImg" class="thumbnail s-rounded" />
          <div class="article-content w-100">
            <p>
              {{ item.summary }}
            </p>
          </div>
        </div>
        <!---->
        <!---->
      </div>
      <div class="tile-footer text-gray text-tiny flex-center justify-between">
        <div class="flex-center">
          <time class="mr-2">{{ dayjs(item.updateTime).fromNow() }}</time>
        </div>
        <a
          href="javascript:void(0)"
          @click="toArticleDetail(item.id)"
          class="btn btn-link btn-sm text-gray d-flex align-center"
        >
          阅读全文
          <AlexSVG
            class="align-center"
            height="0.7rem"
            color="#cbd0d9"
            src="/dashicons/arrow-right-alt.svg"
          />
        </a>
      </div>
    </div>
    <div class="divider"></div>
  </div>
</template>

<style lang="scss" scoped>
.alex-icon {
  display: flex !important;
}
</style>
